import React, {Component} from "react";
import {inject, observer} from "mobx-react";
import {Route} from "react-router-dom";
import QuerySuccess from "./QuerySuccess"
import QueryFail from "./QueryFail"

@inject("queryStore")
@observer
class PositionQuery extends Component {
    constructor(props) {
        super(props);
        this.state = {
            province: '',
            city: '',
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleQueryClick = this.handleQueryClick.bind(this);
    }

    componentDidMount() {
        // this.props.queryStore.setPositionQuery(false);
        this.setState({
            province: '',
            city: '',
        });
        this.props.queryStore.setFlag(-1);
        this.props.queryStore.setNewModel();
    }

    handleQueryClick = () => {
        if (this.state.province === "") {
            alert("请选择省份/直辖市");
            return;
        }
        this.props.queryStore.fetchQueryByLocation(this.state.province, this.state.city);
        // this.props.queryStore.setPositionQuery(true);
        this.props.queryStore.setNewModel();
    };

    handleChange(e) {
        const select = e.target;
        this.setState({
            [select.name]: select.value
        });
    }

    render() {
        if (this.props.queryStore.flag===-1) {
            return (
                <div>
                    <div>
                        校友查询
                    </div>
                    <div>位置查询</div>
                    <div>
                        <span>*</span><span>省份/直辖市：</span>
                        <select value={this.state.province} name="province" onChange={this.handleChange}>
                            <option value="" selected>--请选择省份/直辖市--</option>
                            <option value="北京市">北京市</option>
                            <option value="天津市">天津市</option>
                            <option value="河北省">河北省</option>
                            <option value="山西省">山西省</option>
                            <option value="内蒙古自治区">内蒙古自治区</option>
                            <option value="辽宁省">辽宁省</option>
                            <option value="吉林省">吉林省</option>
                            <option value="黑龙江省">黑龙江省</option>
                            <option value="上海市">上海市</option>
                            <option value="江苏省">江苏省</option>
                            <option value="浙江省">浙江省</option>
                            <option value="安徽省">安徽省</option>
                            <option value="福建省">福建省</option>
                            <option value="江西省">江西省</option>
                            <option value="山东省">山东省</option>
                            <option value="河南省">河南省</option>
                            <option value="湖北省">湖北省</option>
                            <option value="湖南省">湖南省</option>
                            <option value="广东省">广东省</option>
                            <option value="广西壮族自治区">广西壮族自治区</option>
                            <option value="海南省">海南省</option>
                            <option value="重庆市">重庆市</option>
                            <option value="四川省">四川省</option>
                            <option value="贵州省">贵州省</option>
                            <option value="云南省">云南省</option>
                            <option value="西藏自治区">西藏自治区</option>
                            <option value="陕西省">陕西省</option>
                            <option value="甘肃省">甘肃省</option>
                            <option value="青海省">青海省</option>
                            <option value="宁夏回族自治区">宁夏回族自治区</option>
                            <option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
                            <option value="香港特别行政区">香港特别行政区</option>
                            <option value="澳门特别行政区">澳门特别行政区</option>
                            <option value="台湾省">台湾省</option>
                            <option value="其它">其它</option>
                        </select>
                    </div>
                    <div>
                        <span>市/辖区:</span>
                        <input type="text" value={this.state.city} name="city" placeholder="如：XXX市" onChange={this.handleChange}/>
                    </div>
                    <div>
                        <button onClick={this.handleQueryClick} className="query_btn">查询</button>
                    </div>
                </div>)
        } else if (this.props.queryStore.flag===1) {
            return (
                <div>
                    <QuerySuccess queryStore={this.props.queryStore} province={this.state.province} city={this.state.city}/>
                </div>
            )
        } else {
            return (
                <div>
                    <QueryFail queryStore={this.props.queryStore}/>
                </div>
            )
        }
    }

}

export default PositionQuery;